import React, {Component} from 'react'
import {connect} from 'react-redux'

import Header from "../components/header";
import TimeChoose from "../components/timechoose"

import {PullToRefresh, List,Toast} from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;
import {format} from "../utils/datetime"
import {loadOrderlist} from "../redux/actions/userAction"

class Record extends Component {
  constructor (props){
   super(props)
   this.state= {
     time:{
      startTime:format(new Date(), 'Y-m-d'),
      endTime: format(new Date(new Date().getTime() + 1 * 24 * 60 * 60 * 1000), 'Y-m-d')
     },
     defaulthover:0,
     orderlist:[],
     pageNo:1,
     isShow:[],
     refreshing:false,
     height: document.documentElement.clientHeight
   },
   this.orderType = 1
}
chkprops(props,beginTime,endTime){
  const {dispatch,history,user} = this.props
  let {pageNo} = this.state
  const _this = this;
  const gameCode = ""
  dispatch(loadOrderlist(this.orderType, pageNo, gameCode,beginTime,endTime,(ok,data)=>{
    ok? _this.setState({orderlist:data.list}) : (
      Toast.fail("数据加载失败",1), 
      history.go("/"))
  }))
}
timeChkprops(props,beginTime,endTime,index){
  this.setState({pageNo:1,time:{startTime:beginTime,endTime},defaulthover:index},()=>{
    this.chkprops(props,beginTime,endTime)
  })
}
show(index){
  const { isShow} = this.state
  var num = isShow.indexOf(index)
  num< 0 ? isShow.push(index) : isShow.splice(num,1)
  this.setState({
    isShow
  })
 }
componentWillMount(){
  const {startTime,endTime} = this.state.time
  this.chkprops(this.props,startTime,endTime)
}
    menu(){
      return {
        alertTit:"类型选择",
        alertitems: [{
          title:"全部订单",
          key: 1
        },{
          title:"我的中奖",
          key: 2
        },{
          title:"待开奖",
          key: 3
        },{
          title:"未中奖",
          key: 4
        }]
      }
    }
    tabsChoose=(item)=>{
      console.log(item);
      this.orderType = item
      const {startTime,endTime} = this.state.time
      this.chkprops(this.props,startTime,endTime)
    }
   render() {
    const {time,defaulthover,orderlist,pageNo} = this.state
   const {dispatch,history} = this.props
  console.log(time,"12");
   return <div className="record">
     <Header title="投注记录" {...this.props} tabs={this.menu()} tabsChoose={this.tabsChoose} 
     defaultradio={0}
     ></Header>
     <TimeChoose {...this.props}  time={time} defaulthover={defaulthover}  chkprops={this.timeChkprops.bind(this)}></TimeChoose>
    {orderlist.length>0 ? <PullToRefresh
             ref={el => this.ptr = el}
              direction={'up'}
              refreshing={this.state.refreshing}
              style={{
                height: this.state.height,
                overflow: 'auto',
              }}
              onRefresh={() => {
                this.setState({ refreshing: true ,pageNo: pageNo+1});
                const that = this;
                Toast.loading("数据加载中")
                dispatch(loadOrderlist(this.orderType, pageNo+1,"",time.startTime,time.endTime,(ok,data)=>{
                  ok? (data.list.length >0 ? (that.setState({orderlist:orderlist.concat(data.list),refreshing: false}),Toast.hide()) : (that.setState({refreshing: false}),Toast.hide(),Toast.fail("没有更多记录")) ) : (
                    Toast.fail("数据加载失败",1), 
                    history.go("/"))
                }))
              }}
            >
           
     <List className="my-record">
      {
         orderlist.map((item,index)=>{
          return <div className={this.state.isShow.indexOf(index)>-1? "recorditem downarrow" : "recorditem"}  key={index}>
                      <Item
                arrow="horizontal"
                multipleLine
                onClick={() => { this.show(index)}}
              >
              <div className="item-head">
              <h3>{item.gameName}</h3>
              <span>第{item.qs}期</span>
              <span className="redfont">-{item.betMoney}元</span>
              </div>
              <div className="item-time"><span>{item.betTime}</span> <span className="greenfont">{item.orderStatus=="已中奖" ? `赢${item.kyje}元` : item.orderStatus}</span></div>
              <div className="item-wanfa"><span>玩法名称:{item.itemName}</span> <span>投注号码：{item.betNumber}</span></div>           
              </Item> 
              <div className={this.state.isShow.indexOf(index)>-1? "content" : "content hidden"}>
                  <h3 className="redfont">订单内容</h3>
                  <ul>
                    <li><span>开奖结果</span>{item.openCode}</li>
                    <li><span>下注时间</span>{item.betTime}</li>
                    <li><span>玩法</span>{item.itemName}</li>
                    <li><span>下注内容</span>{item.betNumber}</li>
                    <li><span>赔率</span>{item.rate}</li>
                    <li><span>下注金额</span>{item.betMoney}</li>
                    <li><span>可赢奖金</span>{item.kyje}</li>
                    <li><span>返水金额</span>{item.backWaterMoney}</li>
                    <li><span>订单状态</span>{item.orderStatus}</li>
                  </ul>
              </div>
              </div>
        }) 
      }
     </List>
     </PullToRefresh>:<div><p className="norecord">没有记录</p></div>}
   </div>
   }
}

function mapStateToProps(state) {
  return {
    user: state.user
  }
}
export default connect(mapStateToProps)(Record)